<template>
  <div class="app-container">
    <div style="margin: 0 0 1rem 1rem">
      <div class="allNavSty">
        <div><svg-icon icon-class="lead" />批量导入</div>
      </div>
      <div>
        <div v-if="!loading && !success" style="margin: 20px 50px">
          <el-steps :active="currtent">
            <el-step
              v-for="item in stepList"
              :key="item.id"
              :title="item.title"
              :description="item.description"
            />
          </el-steps>
        </div>
        <!-- 上传文件 -->
        <One-lead
          v-show="currtent == 1 && !loading && !success"
          ref="oneLead"
          @refresh="refresh"
        />
        <!-- 清洗数据 -->
        <Two-lead
          v-show="currtent == 2 && !loading && !success"
          ref="twoLead"
          @refresh="refresh"
        />
        <!-- 提交数据 -->
        <Three-lead
          v-show="currtent == 3 && !loading && !success"
          ref="threeLead"
          @refresh="refresh"
        />
      </div>
      <!-- 进度条 -->
      <div class="mask-loading" v-if="loading && !success">
        <div class="loading-box">
          <div class="loading-tips">数据正在执行导入与分析中，请勿关闭或刷新页面</div>
          <div class="loading-value">{{ percentage }}%</div>
        </div>
      </div>
      <!-- 完成页 -->
      <div class="percentageAllSty1" v-if="success">
        <el-result icon="success">
          <template slot="title">
            <div class="titleSty">批量导入完成</div>
          </template>
          <template slot="extra">
            <el-button type="primary" size="medium" @click="handleSuccess"
              >完成</el-button
            >
          </template>
        </el-result>
      </div>
    </div>
  </div>
</template>
<script>
import OneLead from "./one-lead.vue";
import TwoLead from "./two-lead.vue";
import ThreeLead from "./three-lead.vue";
export default {
  name: "Building",
  components: { OneLead, TwoLead, ThreeLead },
  data() {
    return {
      currtent: 1, // 当前步骤条
      stepList: [
        { id: 1, title: "上传文件", description: "请上传文件" },
        { id: 2, title: "清洗数据", description: "处理有问题的数据" },
        { id: 3, title: "提交数据", description: "预览数据并提交" },
      ],
      loading: false, // 进度条
      success: false, // 是否成功
      percentage: 0, // 进度条
      timer: null, // 定时器
    };
  },
  mounted() {
    let val = this.$cache.local.getJSON("ai-predict");
    if (val) {
      this.refresh(val);
    } else {
      this.$refs.oneLead.init();
    }
  },
  methods: {
    // 更新步骤
    refresh(val) {
      if (val.step == 1) {
        this.currtent = val.step;
        this.$refs.oneLead.init(val.reset);
        if (this.timer) clearInterval(this.timer);
        setTimeout(() => {
          this.loading = false;
          this.percentage = 0;
        }, 300);
      }
      if (val.step == 2) {
        if (this.timer) clearInterval(this.timer);
        this.percentage = 100;
        setTimeout(() => {
          this.loading = false;
          this.currtent = val.step;
          this.$refs.twoLead.init(val.form, val.rows, val.total);
        }, 1000);
      }
      if (val.step == 3) {
        if (val.success) {
          this.success = val.success;
          this.$cache.local.remove("ai-predict");
        } else {
          this.currtent = val.step;
          this.$refs.threeLead.init(val.form);
        }
      }
      if (val.step == 4) {
        this.loading = true;
        setTimeout(() => {
          this.timeSte(val.num);
        }, 1000);
      }
    },
    // 关闭提示
    handleSuccess() {
      this.success = false;
      this.refresh({ step: 1, reset: true });
    },
    // 进度
    timeSte(number) {
      var t = 0;
      this.timer = setInterval(() => {
        t += 1;
        if (t < 100) {
          this.percentage = t;
        }
        if (t == 99) clearInterval(this.timer);
      }, 180 * number);
    },
  },
};
</script>

<style lang="scss" scoped>
.ellipsisList {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allNavSty {
  padding: 0.5rem 0;
  border-bottom: 1px solid #f3f3f5;
  font-size: 18px;
  color: rgb(102, 102, 102);
  font-weight: bold;
}
.titleSty {
  font-size: 18px;
  font-weight: bold;
  color: rgb(102, 102, 102);
}
.percentageAllSty1 {
  margin: 10% auto;
}
.mask-loading {
  user-select: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  .loading-box {
    background-image: url("../../assets/images/loading.gif");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 40rem;
    height: 40rem;
    display: flex;
    flex-direction: column-reverse;
    .loading-value {
      font-size: 26px;
      color: #55c3ff;
      text-align: center;
      font-weight: bold;
    }
    .loading-tips {
      font-size: 16px;
      color: rgb(141, 141, 141);
      text-align: center;
      padding-top: 1rem;
    }
  }
}
</style>
